<template>
    <!-- 基础信息 -->
    <div class="card_box b-box mt-10">
        <div v-if="!slotTitleBox" class="card_title fl-box">
            {{ title }}
            <slot name="sampleStatus"></slot>
            <div class="down_icon" v-if="downShow" :class="{ down_icon_d: cardShow }" @click="cardChangeShow"></div>
        </div>
        <div v-else class="fl-box" style="position: relative;align-items: center;">

            <slot name="titleBox"></slot>
            <div class="down_icon" v-if="downShow" :class="{ down_icon_d: cardShow }" @click="cardChangeShow"></div>
        </div>
        <div class="card_content_box" ref="mains" :class="{ card_hight: cardShow }">
            <slot></slot>
        </div>


    </div>

</template>
<script setup lang="ts">
import { defineProps, ref, useSlots } from 'vue'
defineProps({

    // 展示title
    title: { type: String, default: '' },
    // 是否显示收起
    downShow: { type: Boolean, default: true },
})
const slotTitleBox = useSlots().titleBox || false;

const mains = ref()


const cardShow = ref(false)

const cardChangeShow = () => {
    cardShow.value = !cardShow.value
}
</script>
<style lang="less" scoped>
.card_box {
    width: 345px;
    background-color: #fff;
    border-radius: 5px;

    .card_title {
        position: relative;
        align-items: center;
        padding: 0 15px 0px 15px;
        height: 46px;

        &::before {
            display: block;
            margin-right: 10px;
            content: "";
            width: 3px;
            height: 18px;
            background: linear-gradient(180deg, #FFFFFF 0%, #0094FF 100%, #0094FF 100%);
            border-radius: 2px;
        }

    }

    .down_icon {
        display: block;
        content: "";
        width: 10px;
        height: 6px;
        background: url("@/assets/newui/details/icon_shangjiantou@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 15px;
        transition: all 0.5s ease-in-out;

    }
}

.card_hight {
    max-height: 0px !important;
    padding-bottom: 0px !important;
}

.down_icon_d {
    transform: rotateX(180deg);
}

.card_content_box {
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    max-height: 2000px;
    padding: 0px 15px 0px 15px;
}

.mt-10 {
    margin-top: 10px;
}

.fl-box {
    display: flex;
}

.b-box {
    box-sizing: border-box;
}
</style>